<template>
	<view class="container">
		<view class="listCon ">
			<u-cell-group>
				<u-cell-item v-for="(item, index) in list" :key="item.id" :value="item.province + item.city + item.district" :index="index" @click="cellClick">
					<view slot="title">
						<view>{{ item.store | shopTypeFilter }}</view>
						<view>门店编码：{{ item.shopNo }}</view>
						<text>门店名：{{ item.name }}</text>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-empty margin-top="12" :show="listLength == 0" mode="data"></u-empty>
		<view class="cu-modal" :class="modalVisible ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">门店二维码</view>
					<view class="action" @tap="modalVisible = false"><text class="cuIcon-close text-red"></text></view>
				</view>
				<view class="codeImgContainer">
					<view v-if="shopCodeUrl"><image mode="aspectFit" :src="shopCodeUrl"></image></view>
					<view class="canvasCon" v-else><canvas style="width: 200px; height: 200px;" canvas-id="code" id="code"></canvas></view>
					<view class="modalBtnContainer padding-bottom-xs"><button :disabled="!shopCodeUrl" class="cu-btn round bg-blue" @click="saveCode">保存到本地</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import { getSharePoster } from './components/QS-SharePoster/QS-SharePoster.js';
export default {
	data() {
		return {
			list: [],
			modalVisible: false,
			imgCache: {},
			shopCodeUrl: ''
		};
	},
	computed: {
		listLength() {
			return this.list.length;
		},
		dept() {
			return this.$store.state.user.userInfo.teamNo;
		}
	},
	onReady() {
		this.initData();
	},
	methods: {
		...mapActions({
			getShopsList: 'agent/getShopsList'
		}),
		initData() {
			if (this.dept && this.dept.includes('ZN')) {
				this.getShopsList({
					search: this.dept,
					limit: 100
				})
					.then(res => {
						console.log(res);
						if (res && res.code == 0) {
							this.list = res.data.list;
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		},
		cellClick(index) {
			this.codeClick(this.list[index]);
		},
		modalConfirmClick() {
			this.modalVisible = false;
			this.shopCodeUrl = '';
		},
		async codeClick(item) {
			const codeRes = await getSharePoster({
				_this: this, //若在组件中使用 必传
				type: 'testShareType',
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				posterCanvasId: 'code', //canvasId
				delayTimeScale: 20, //延时系数
				background: {
					width: 200,
					height: 200,
					backgroundColor: 'white'
				},
				drawArray: ({ bgObj, type, bgScale }) => {
					return new Promise((rs, rj) => {
						rs([
							{
								type: 'qrcode',
								text: item.qrcodeUrl,
								size: 200,
								dx: 0,
								dy: 0
							}
						]);
					});
				},
				setCanvasToTempFilePath: {
					destWidth: 200,
					destHeight: 200
				}
			});
			this.shopCodeUrl = codeRes.poster.tempFilePath;
			this.modalVisible = true;
		},
		saveCode() {
			wx.saveImageToPhotosAlbum({
				filePath: this.shopCodeUrl,
				success: function(res) {
					wx.showToast({
						title: '保存成功'
					});
				},
				fail: function(err) {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style lang="less">
.canvasCon {
	position: fixed;
	left: 100vw;
}
.listCon {
	.listItem {
		width: 100px;
		padding: 10px;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
		border: 1rpx solid #ebeef5;
		border-radius: 15rpx;
		margin: 12rpx 12rpx;
		.shopName {
			text-align: center;
			word-break: break-all;
			color: #007aff;
		}
		.codeImg {
			width: 80px;
			height: 80px;
		}
	}
}
</style>
